<template>
    <div class="contianer" v-show="isShow">
        <div class="title">信息面板</div>
        <div class="tr">
            <span class="label">left:</span> <input type="number" class="input-number" v-model="left"  :min="0"  />
            <span class="label">top:</span> <input type="number" class="input-number" v-model="top"  :min="0"  />

        </div>
        <div v-show="type == 'image' || type == 'rect'">
            <div  class="tr">
                <span class="label">width:</span> <input type="number" class="input-number" v-model="width"  :min="0" />
                <span class="label">height:</span> <input type="number" class="input-number" v-model="height"  :min="0" />
            </div>

            <div  class="tr">
                <span class="label">缩放 X:</span> <input type="number" class="input-number" v-model="scaleX"  :min="0" :step="0.1" />
                <span class="label">缩放 Y:</span> <input type="number" class="input-number" v-model="scaleY"  :min="0" :step="0.1" />
            </div>
        </div>
        <div v-show="type == 'text'">
            <div class="tr">
                <span class="label">文本:</span> <el-input v-model="text" type="textarea" class="textarea"></el-input>
            
            </div>
             <div class="tr">
                <span class="label">字体:</span>
                <el-select v-model="fontFamily" placeholder="请选择">
                    <el-option
                    v-for="item in fontFamilyList"
                    :key="item"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
            </div>

            <div class="tr">
                <span class="label">字体大小:</span> <input type="number" class="input-number" v-model="fontSize"  :min="12" />
                <span class="middle">像素</span>
            </div>

            <div class="tr">
                <span class="label">样式:</span>
               
                <img v-if="fontWeight == 'normal'" @click="fontWeight = 'bold'" class="style-btn" src="../img/1.png" alt="">
                <img v-else @click="fontWeight = 'normal'" class="style-btn" src="../img/1-1.png" alt="">
               
                <img v-if="fontStyle == 'normal'" @click="fontStyle = 'italic'" class="style-btn" src="../img/2.png" alt="">
                <img v-else @click="fontStyle = 'normal'" class="style-btn" src="../img/2-1.png" alt="">
               
                <img v-if="underline == false" @click="underline = true" class="style-btn" src="../img/3.png" alt="">
                <img v-else @click="underline = false" class="style-btn" src="../img/3-1.png" alt="">
                
                <img v-if="linethrough == false" @click="linethrough = true" class="style-btn" src="../img/4.png" alt="">
                <img v-else @click="linethrough = false" class="style-btn" src="../img/4-1.png" alt="">
            </div>
           
        </div>

        <div v-show="type =='text' || type == 'rect'" class="tr">
            <span class="label">颜色:</span> 
            <el-color-picker v-model="fill" class="middle"></el-color-picker>
        </div>

        <!-- <div class="tr">
            <span class="label">角度:</span> 
            <input type="number" class="input-number" v-model="angle" class="middle" />
        </div> -->

        <div class="tr">
            <el-button @click="bringToFront" type="primary">置顶</el-button>
            <el-button @click="sendToBack" type="primary">置底</el-button>
            <el-button @click="remove" type="danger">删除</el-button>
        </div>
    </div>
</template>
<script>
import bus from '../bus/bus'
export default {
    watch: {
        left: function() {
           this.selectedObj.set('left', parseInt(this.left)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        top: function() {
            this.selectedObj.set('top', parseInt(this.top)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        width: function() {
            this.selectedObj.set('width', parseInt(this.width)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        height: function() {
            this.selectedObj.set('height', parseInt(this.height)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        scaleX: function() {
            this.selectedObj.set('scaleX', parseFloat(this.scaleX)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        scaleY: function() {
            this.selectedObj.set('scaleY', parseFloat(this.scaleY)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        angle: function() {
            this.selectedObj.set('angle', parseInt(this.angle)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        text: function() {
            this.selectedObj.set('text', this.text).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        fontFamily: function(){
            this.selectedObj.set('fontFamily', this.fontFamily).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        fontSize: function() {
            this.selectedObj.set('fontSize', parseInt(this.fontSize)).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        fontWeight: function(){
             this.selectedObj.set('fontWeight', this.fontWeight).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        underline: function(){
             this.selectedObj.set('underline', this.underline).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        linethrough: function(){
             this.selectedObj.set('linethrough', this.linethrough).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        fontStyle: function(){
            this.selectedObj.set('fontStyle', this.fontStyle).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        },
        fill: function() {
            this.selectedObj.set('fill', this.fill).setCoords();
            fabricCanvas.canvas.requestRenderAll();
        }
    },
    data(){
        return {
            left: 0,
            top: 0,
            width: 0,
            height: 0,
            scaleX: 1,
            scaleY: 1,
            angle: 0,
            
            text: '',
            fontSize: 12,
            fill: '#000',
            fontFamily: '',
            fontWeight: 'normal',
            fontStyle: 'normal',
            lineHeight: 1,
            underline: false,
            overline: false,
            linethrough: false,
            

            fontFamilyList: [
                '宋体','楷体','黑体','微软雅黑'
            ],
            fontWeightList: [
                
            ],


            selectedObj: null,
            isShow: false,
            type: ''
        }
    },
    methods: {
        change(e){
            console.log(e)
        },
        modified(obj){
            this.isShow = true
            this.selectedObj = obj
            this.setPannelData()
        },
        cleared(){
            this.isShow = false
        },
        created(list){
            this.isShow = true
            this.selectedObj = list[0]
            this.setPannelData()
        },
        updated(list){
            this.isShow = true
            this.selectedObj = list[0]
            this.setPannelData()
        },

        setPannelData(){
            this.type = this.selectedObj.type

            this.left = this.selectedObj.left
            this.top = this.selectedObj.top
            this.angle = this.selectedObj.angle
            

            switch(this.type){
                case 'rect':
                    this.width = this.selectedObj.width
                    this.height = this.selectedObj.height
                    this.scaleX = this.selectedObj.scaleX
                    this.scaleY = this.selectedObj.scaleY
                    this.fill = this.selectedObj.fill

                    this.selectedObj.setControlVisible('mtr', false)

                   
                    break;
                case 'image':
                     this.width = this.selectedObj.width
                    this.height = this.selectedObj.height
                    this.scaleX = this.selectedObj.scaleX
                    this.scaleY = this.selectedObj.scaleY

                    this.selectedObj.setControlVisible('mtr', false)

                    
                    break;
                case 'text':
                    this.text = this.selectedObj.text
                    this.fontSize = this.selectedObj.fontSize
                    this.fontFamily = this.selectedObj.fontFamily
                    this.fill = this.selectedObj.fill

                    this.fontWeight = this.selectedObj.fontWeight
                    this.underline = this.selectedObj.underline
                    this.linethrough = this.selectedObj.linethrough
                    this.fontStyle = this.selectedObj.fontStyle
          
                   
                  
                    this.selectedObj.setControlVisible('tl', false)
                    this.selectedObj.setControlVisible('bl', false)
                    this.selectedObj.setControlVisible('tr', false)
                    this.selectedObj.setControlVisible('br', false)
                    this.selectedObj.setControlVisible('ml', false)
                    this.selectedObj.setControlVisible('mb', false)
                    this.selectedObj.setControlVisible('mr', false)
                    this.selectedObj.setControlVisible('mt', false)
                    this.selectedObj.setControlVisible('mtr', false)

                    
                 
                    
                    break;
            }

            fabricCanvas.canvas.renderAll();

        },
        bringToFront(){
            fabricCanvas.canvas.bringToFront(this.selectedObj)
        },
        sendToBack(){
            fabricCanvas.canvas.sendToBack(this.selectedObj)
        },
        remove(){
          

             var list = fabricCanvas.canvas.getActiveObjects()
                   
                    for(var item of list){
                        fabricCanvas.canvas.remove(item);
                    }
                     fabricCanvas.canvas.discardActiveObject()
                     fabricCanvas.canvas.requestRenderAll(); 
                    
        }
    },
    mounted(){
        bus.$off('object:modified')
        bus.$on('object:modified', this.modified)

        bus.$off('selection:cleared')
        bus.$on('selection:cleared', this.cleared)

        bus.$off('selection:created')
        bus.$on('selection:created', this.created)

        bus.$off('selection:updated')
        bus.$on('selection:updated', this.updated)
    }
}
</script>
<style scoped>
.contianer{
    padding: 10px;
     border: 1px solid #ccc;
     margin: 0 0 0 20px;
}
.title{
    font-size: 20px; padding: 0 0 20px 0;
    text-align: center;
}
.textarea{
    display: inline-block; vertical-align: middle;
    width: 300px;
}
.tr{
    padding: 0 0 10px 0;
}
.label{
    width: 60px; display: inline-block; vertical-align: middle; padding: 0 0 0 10px;
    text-align: right;
}
.middle{
    display: inline-block; vertical-align: middle;
}
.input-number{
    border: 1px solid #C0C4CC; padding: 5px;
    width: 100px;
}
.style-btn{
    display: inline-block; vertical-align: middle;
    cursor: pointer;
}
</style>